<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        /*大盒子*/
        .box {
            border: 2px solid black;
            width: 1200px;
            padding: 0;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
            height: 500px;

        }


        /* 左右箭头 */
        #next,
        #prev {
            background-color: black;
            border-radius: 50%;
            position: absolute;

            width: 50px;
            height: 50px;

            top: 200px;
            color: whitesmoke;
            text-align: center;
            z-index: 10;

        }

        #next {
            right: 5%;
        }

        #prev {
            left: 5%;
        }

        .box li {
            position: absolute;
        }

        .box li img {
            width: 100%;
            /* height: 100%; */
        }


        .box li:nth-child(1) {
            width: 300px;
            opacity: 0.4;
            top: 30px;
            left: 50px;
            z-index: 1;
        }

        .box li:nth-child(2) {
            width: 400px;
            opacity: 0.7;
            top: 100px;
            left: 0;
            z-index: 2;
        }

        .box li:nth-child(3) {
            width: 600px;
            opacity: 1;
            bottom: 0;
            left: 300px;
            z-index: 3;
        }

        .box li:nth-child(4) {
            width: 400px;
            opacity: 0.7;
            right: 0px;
            top: 100px;
            z-index: 2;
        }

        .box li:nth-child(5) {
            width: 300px;
            opacity: 0.4;
            top: 30px;
            right: 50px;
            z-index: 1;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>

    <div class="box">

        <!-- 图片设置 -->

        <ul>
            <li><img src="http://qinniu.douziqianduan.icu/wallpaper01.jpg-500x300" alt=""></li>
            <li><img src="http://qinniu.douziqianduan.icu/wallpaper02.jpg-500x300" alt=""></li>
            <li><img src="http://qinniu.douziqianduan.icu/wallpaper03.jpg-500x300" alt=""></li>
            <li><img src="http://qinniu.douziqianduan.icu/wallpaper04.jpg-500x300" alt=""></li>
            <li><img src="http://qinniu.douziqianduan.icu/wallpaper05.jpg-500x300" alt=""></li>
        </ul>


        <!-- 左右箭头设置 -->
        <div class="control">
            <a href="javascript:;" id="prev">左</a>
            <a href="javascript:;" id="next">右</a>
        </div>
    </div>

    <script>
        //定位置 五个位置对应五个json对象,放入数组中,可以灵活的获取这些json对象
        let json = [{
            width: '300px',
            opacity: 0.4,
            top: '30px',
            left: '50px',
            zIndex: 1
        }, {
            width: '400px',
            opacity: 0.7,
            top: '100px',
            left: 0,
            zIndex: 2
        }, {
            width: '600px',
            opacity: 1,
            bottom: 0,
            left: '300px',
            zIndex: 3
        }, {
            width: '400px',
            opacity: 0.7,
            top: '100px',
            right: 0,
            zIndex: 2
        }, {
            width: '300px',
            opacity: 0.4,
            top: '30px',
            right: '50px',
            zIndex: 1
        }];



        let eLiList = document.querySelectorAll(".box li");
        let eRight = document.getElementById('next');
        let eLeft = document.getElementById('prev');

        // 图片的索引位置
        let index = 0;

        function refreshImageLocation(index) {
            console.log("?")
            // 默认情况下，第i个对应i-index个位置
            for (let i = 0; i < eLiList.length; i++) {
                let li = eLiList[i];
                let locationIndex = i - index;

                if (locationIndex < 5) {
                    locationIndex += 5;
                }

                let locationDate = json[locationIndex];
                li.animate(locationDate);
            }
        }


        // 点击箭头事件
        eLeft.onclick = function () {
            index++;
            if (index == 5) {
                index = 0;
            }

            refreshImageLocation(index);
        }

        eRight.onclick = function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            refreshImageLocation(index);
        }

        refreshImageLocation(0);
    </script>

</body>

</html>